<template>
  <div>
    <h1>图书管理</h1>
    <!--表格位置-->
    <div class="button-table-box" v-loading="isLoading">
      <div class="info-in-box">
        <span class="title">图书名称：</span>
        <el-input clearable placeholder="输入图书名称" v-model="searchProduct" style="width: 15%"></el-input>
        <el-button type="primary" size="mini" style="margin-left: 30px;" @click="getBookList()">查询</el-button>
      </div>
      <div class="button-box" style="margin-top: 20px;">
        <el-button type="primary"  size="small" icon="el-icon-circle-plus"
                   class="add-button" @click="dialogFormVisible = true">添加</el-button>
      </div>
      <table-list :tableAllData="tableAllData" @getTableData="getTableData" ref="tableList"></table-list>
    </div>
    <!-- 添加图书弹出框-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible" width="35%"  @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="图书名称：" label-width="120px">
          <el-input v-model="submitForm.name" clearable placeholder="请输入产品名称" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="图书价格：" label-width="120px">
          <el-input v-model="submitForm.price" type="number" clearable placeholder="请输入价格" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="图书详情：" label-width="120px">
          <el-input v-model="submitForm.description" type="text" maxlength="19" clearable placeholder="图书详情" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="作者：" label-width="120px">
          <el-input v-model="submitForm.author" type="text" maxlength="19" clearable placeholder="作者" style="width: 70%;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="uploadPicture">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改图书弹出框-->
    <el-dialog title="修改" :visible.sync="updateDialog" width="35%"  @close="cancelModal"
               v-loading="isLoading">
      <el-form>
        <el-form-item label="图书名称：" label-width="120px">
          <el-input v-model="updateForm.name" clearable placeholder="请输入产品名称" style="width: 70%;">
          </el-input>
        </el-form-item>

        <el-form-item label="图书价格：" label-width="120px">
          <el-input v-model="updateForm.price" type="number" clearable placeholder="请输入价格" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="图书详情：" label-width="120px">
          <el-input v-model="updateForm.description" maxlength="19" clearable placeholder="图书详情" style="width: 70%;">
          </el-input>
        </el-form-item>
        <el-form-item label="作者：" label-width="120px">
          <el-input v-model="updateForm.author" type="text" maxlength="19" clearable placeholder="作者" style="width: 70%;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="addBook()">确 定</el-button>
      </div>
    </el-dialog>
    <page-pagination :page-list="pageList" ref="pagePagination"></page-pagination>
    <!--    用作删除的弹框-->
    <delete-dialog :dialog="deleteDialog" ref="deleteDialog"></delete-dialog>
  </div>
</template>

<script>
import {tips} from "@/common/js/optionTips";
import {addProduct, deleteProduct, getAllProduct, queryProductCategory, upAndDown, updateProduct} from "@/api/product";
import {dateFormYMD, formatDate} from "@/common/js/dateFormYMD";
import {getToken} from "@/utils/auth";
import axios from "axios";

export default {
  name: "addProduct",
  data() {
    return {
      dialogVisible: false,
      submitForm: {
        name:"",
        price:"",
        description: "",
        author:""
      },
      // 保存编辑图书的信息
      updateForm: {
        name:"",
        price:"",
        description: "",
        author:""
      },
      // 添加模态框的
      dialogFormVisible: false,
      // 修改模态框的
      updateDialog: false,
      // 顶部筛选信息
      isLoading: false,
      searchProduct: '',
      // 表格数据
      tableAllData: {
        dataNull: false,
        tableTitle: [{
          prop: 'id',
          label: '图书ID',
          width: '100',
          option: '',
          author:''
        }, {
          prop: 'name',
          label: '图书名称',
          width: '150',
          option: ''
        }, {
          prop: 'price',
          label: '图书价格',
          width: '150',
          option: ''
        },
          {
            prop: 'description',
            label: '描述',
            width: '150',
            option: ''
          },
          {
            prop: 'author',
            label: '作者',
            width: '150',
            option: ''
          },
          ],
        tableData: [],
        option: {
          width: '150',
          button: [ {
            size: 'mini',
            type: 'success',
            name: '编辑'
          }, {
            size: 'mini',
            type: 'danger',
            name: '删除'
          }]
        }
      },
      // 底部分页的数据
      pageList: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      // 删除的模态框的数据
      deleteDialog: {
        title: '产品',
        dialogFormVisible: false,
        id: ''
      },
      deleteScope: {}, // 用作当从组件传过来确认删除时用的
    }
  },
  methods: {
    initPage:function (){
      this.pageList.pageNum = 1;
      this.pageList.pageSize = 10;
    },
    // 关闭模态框
    cancelModal: function () {
      //隐藏添加图书框
      this.dialogFormVisible = false;
      //隐藏删除框
      this.deleteDialog.dialogFormVisible = false;
    },
    addBook:function (){
      if(this.submitForm.name === '' || this.submitForm.author === '' || this.submitForm.description === '' || this.submitForm.price ===''){
        tips('error','请完善图书信息')
        return;
      }
      axios.get('api/book/add',{
        book:this.submitForm
      }).then(res=>{
        if(res.code ===200){
          tips('success',res.data.msg)
        }
      }).catch(()=>{
        tips('error','添加失败')
      })
    },
    // 获取表格的点击按钮的信息反馈
    getTableData: function (option) {
      if (option.buttonName === '编辑') {
        if(this.updateForm.name === '' || this.updateForm.author === '' || this.updateForm.description === '' || this.updateForm.price ===''){
          tips('error','请完善图书信息')
          return;
        }
        this.updateDialog = true;
        axios.get('api/book/update',{
          book:this.updateForm
        }).then(res=>{
          if(res.code ===200){
            this.tableAllData.tableData = res.data
            tips('success','修改成功')
          }
        }).catch(()=>{
          tips('error','修改失败')
        })
      } else if (option.buttonName === '删除') {
        this.deleteScope = option; // 将删除的数据存起来
        this.deleteDialog.dialogFormVisible = true; // 打开删除弹窗
        this.deleteDialog.isProduct = true;
        this.deleteDialog.id = option.scopeRow.name; // 发送删除id
      }
    },
    // 用户点击删除某条产品信息
    deleteProduct: function () {
      deleteProduct(this.deleteScope.scopeRow.ID).then(res => {
        if (res.code === 200) {
          this.deleteDialog.dialogFormVisible = false;
          axios.get('api/book/deleteById',{
            id:this.deleteScope.scopeRow.ID
          }).then(res=>{
            if(res.code ===200){
              tips('success',res.data.msg)
            }
          })
        }
      }).catch(() => {
        this.deleteDialog.dialogFormVisible = false;
        tips('error', '删除失败')
      });
    },
    //查询图书
    getBookList: function () {
      this.tableAllData.tableData = [];
      axios.get('api/book/list').then(res=>{
        if(res.code ===200){
          this.tableAllData.tableData = res.data
        }
      }).catch(()=>{
        tips('error','查询失败')
      })
    },
    // 子组件分页通过调用父组件的方法进行调用更新表格
    fatherMethod: function (pageNum, pageSize) {
      this.pageList.pageNum = pageNum;
      this.pageList.pageSize = pageSize;
      this.getProductList()
    }
  },
  mounted() {
    //this.getBookList();
  }
}
</script>

<style lang="scss">
@import "src/common/scss/common";

.hide .el-upload-picture-card{

  display:none;

}

.picture {
  width: 146px;
  height: 146px;
  margin-left: 20%;
}
.change-icon{
  @include icon-style(80px, 80px);
  margin: 4%;
}
.button-table-box{
  @include width-margin(90%, 100%);
  margin-top: 15px;
}
</style>
